<template>
	<uni-file-picker ref="upload" :image-styles="imageStyles" :readonly="readonly" v-model="imageValue"
		fileMediatype="image" mode="grid" @select="select" @progress="progress" @success="success" @delete="deletephoto"
		limit="6" @fail="fail" />
</template>

<script>
import {
	getToken
} from '@/utils/auth'
import store from '@/store'
import {
	getFileName,
	getFileExtension
} from '@/utils/file'
import config from '@/config'
export default {
	props: {
		value: { // 必须要使用value
			default: '',
		},
		readonly: {
			type: Boolean,
			default: false
		},
	},
	model: {
		prop: 'value',
		event: 'valueChanges'
	},

	// props: {
	// 	imageValue: {
	// 		type: Array,
	// 		default: function() {
	// 			return [
	// 				//默认格式
	// 				// {
	// 				// 	"name":"file.txt",
	// 				// 	"extname":"txt",
	// 				// 	"url":"https://xxxx",
	// 				// }

	// 				//上传后对象属性
	// 				// cloudPath: "1675503145608_0.png"
	// 				// extname: "png"
	// 				// fileType: "image"
	// 				// image:Object
	// 				// name: "cpu内存使用率.png"
	// 				// path:"blob:https://localhost:10110/2d62c329-ced4-4b2a-8ecd-336e36bc9eab"
	// 				// progress: 0
	// 				// size: 49225
	// 				// status: "ready"
	// 				// url: "blob:https://localhost:10110/2d62c329-ced4-4b2a-8ecd-336e36bc9eab"
	// 				// uuid: 1675503145610
	// 			]
	// 		}
	// 	}
	// },

	data() {
		return {
			imageValue: [],
			// action: "/api/common/upload", // 上传的图片服务器地址
			action: "/common/upload", // 上传的图片服务器地址
			header: {
				Authorization: "Bearer " + getToken(),
			},

			imageStyles: {
				// "height": 60, // 边框高度
				// "width": 60, // 边框宽度
				// "border": { // 如果为 Boolean 值，可以控制边框显示与否
				// 	"color": "#eee", // 边框颜色
				// 	"width": "1px", // 边框宽度
				// 	"style": "solid", // 边框样式
				// 	"radius": "50%" // 边框圆角，支持百分比
				// }
			}
		}
	},
	computed: {
		// fullName: {
		// 	get: function() {
		// 		console.log('running get function')
		// 		return this.firstName + ' ' + this.lastName
		// 	},
		// 	set: function(value) {
		// 		console.log('running set function')
		// 		var arr = value.split(' ')
		// 		this.firstName = arr[0]
		// 		this.lastName = arr[1]
		// 	}
		// },
		// auditTime: () => {
		// 	return (timestamp) => (timestamp > 0 ? convertDate(timestamp) : "--");
		// },

		// getUnifilepickerFormat: () => {
		// 	get: function(value) {
		// 		return (value) => {
		// 			if (value) {
		// 				return [{
		// 					"name": getFileName(value),
		// 					"extname": getFileExtension(value),
		// 					"url": value,
		// 				}]
		// 			} else {
		// 				return []
		// 			}
		// 		}
		// 	},
		// 	set: function() {
		// 		this.$emit("input", newValue);
		// 	},
		// }
	},
	watch: {
		// imageValue(val) {
		// 	this.$emit('input', val)
		// },
		value(val) {
			if (val) {
				this.imageValue = this.getUnifilepickerFormat(this.value)
				console.log('getUnifilepickerFormat：', this.imageValue)
			}
		}
	},
	mounted() {
		//this.imageValue = this.getUnifilepickerFormat(this.value)
	},
	methods: {
		//将字符串转化为filepicker所需格式
		getUnifilepickerFormat(value) {
			if (value) {
				let result = []
				console.log('value：', value)
				let imagelist = value.split(',')
				console.log('imagelist：', imagelist)
				for (let item of imagelist) {
					result.push({
						"name": getFileName(item),
						"extname": getFileExtension(item),
						"url": store.state.config.areaConfig.baseUrl + unescape(item),
					})
				}
				console.log('result：', result)
				return result
			} else {
				return []
			}
		},
		// 选择上传触发函数
		select(e) {
			console.log('选择文件：', e)
			// 根据所选图片的个数，多次调用上传函数
			let promises = []
			for (let i = 0; i < e.tempFilePaths.length; i++) {
				const promise = this.uploadFiles(e.tempFilePaths, i)
				promises.push(promise)
			}
			// Promise.all(promises).then(() => {
			// 	console.log('Promise：')
			// })
		},
		// 上传函数
		async uploadFiles(tempFilePaths, i) {
			let that = this
			await uni.uploadFile({
				url: store.state.config.areaConfig.baseUrl + that.action, //后端用于处理图片并返回图片地址的接口    
				filePath: tempFilePaths[i],
				name: 'file',
				header: that.header,
				success: res => {
					let obj = JSON.parse(res.data)
					if (that.value) {
						obj.fileName = that.value + ',' + obj.fileName
					} else {
						obj.fileName = obj.fileName
					}
					that.$emit("success", obj)
				},
				fail: (err) => {
					console.log("err", that.action);
				}
			})
		},

		// 获取上传进度
		progress(e) {
			console.log('上传进度：', e)
		},

		// 上传成功
		success(e) {
			console.log('上传成功')
		},

		// 上传失败
		fail(e) {
			console.log('上传失败：', e)
		},

		// 移出图片函数
		deletephoto(res) {
			let newvalue = this.value.replace(res.tempFilePath.replace(store.state.config.areaConfig.baseUrl, ''), '')
			newvalue = newvalue.replace(',,', ',')
			if (newvalue.startsWith(',')) {
				newvalue = newvalue.substring(1)
			}
			if (newvalue.endsWith(',')) {
				newvalue = newvalue.substring(0, newvalue.length - 1)
			}
			this.$emit('valueChanges', newvalue)

		},
	}
}
</script>